<template>
  <div class="alarmLevel-root">
    <formTitleVue
      title="预警等级分布"
      :selectOptions="selectOptions"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="earlyWarning-alarmLevel-echarts" height="30vh" :chartsData="chartsData"
               :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myPieRing from '@/components/Echarts/myPieRing.vue';
  import {time_select_optios} from '@/utils/global.js';
  import {alarmList} from "@/api/alarm/statistics";

  export default {
    name: "alarmLevel",
    components: {
      formTitleVue, myPieRing,
    },
    props: {
      alarmTypeOptions: {
        type: Array,
        default: [],
      },
      dateValueMap:{
        type: Object,
        default: {},
      },
      dataSelectOptions:{
        type: Array,
        default: [],
      }
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "全部类型",
            options:this.alarmTypeOptions,
            changeFn:this.changeType
          },
          {
            selectValue: 1,
            options:this.dataSelectOptions,
            changeFn:this.changeDate
          },
        ],
        chartsData: {
          xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
          yData: [],
        },
        echartsOption: {},
        searChForm: {
          startTime: '',
          endTime: '',
          type: 3,
        },
      };
    },
    methods: {
      changeType(val){
        console.log("changeType：",val)
        this.searChForm.modeType = val
        this.search()
      },
      changeDate(item){
        console.log("changeDate：",item)
        this.searChForm.startTime = this.dateValueMap[item].startTime+ " 00:00:00"
        this.searChForm.endTime = this.dateValueMap[item].endTime+ " 23:59:59"
        this.search()
      },
      search() {
        this.fetch({
          ...this.searChForm,
        })
      },
      fetch(params = {}) {
        params.areaCode = this.$store.state.account.user.deptIds;
        alarmList(params).then(res => {
          if (res.code == 200) {
            console.log(res.data.data)
            this.getData(res.data)
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
          console.log("error")
        })
      },
      getData(data) {
        console.log(this.searChForm)
        let res = [
          {value:data.data[0]['level_1'], name:"一级预警"},
          {value:data.data[0]['level_2'], name:"二级预警"},
          {value:data.data[0]['level_3'], name:"三级预警"},
          {value:data.data[0]['level_4'], name:"四级预警"},
        ]

        // 模拟接口数据
        /*let res = [
          {value: 335, name: '综合预警',},
          {value: 110, name: '专项预警'},
        ]*/
        this.chartsData.yData = [
          {
            name: "预警等级分布",
            data: res,
          }
        ]
        let total = 0
        // 给每个饼块统一添加引导文字
        this.chartsData.yData.forEach(item => {
          item.data.forEach(item => {
            item.label = {
              normal: {
                show: true,
                formatter: "{b} {d}%",
              }
            }
            total += item.value
          })
        })
        this.echartsOption = {
          title: {
            text: `预警总数`,
            left: "center",
            top: "42%",
            textVerticalAlign: 'top',
            textStyle: {
              color: "#5A5A5A",
              fontSize: 12,
            },
            subtext: total,
            subtextStyle: {
              // verticalAlign:'top',
              color: "#5A5A5A",
              fontSize: 16,
            },
          },
          legend: {
            show: false,
          }
        }
      },
    },
    mounted() {
      this.changeDate(1)
    },
  };
</script>

<style lang="scss" scoped>
  .alarmLevel-root {
    #echarts-alarmLevel {
      height: 30vh;
    }
  }
</style>
